<template>
  <div class="guide-container">
    <slider class="slider" auto-play="false" infinite="false" @change="change">
        <image class="image" resize='cover' :src="src" v-for='src in imageList'>
        </image>
    </slider>
  </div>

</template>

<script>
var modal = weex.requireModule('modal')

  export default {
    data() {
      return {
        imageList:[
          'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg',
          'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg',
          'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
        ]
      }
    },

    methods: {
      change(event) {
        modal.toast({ message: 'callback: ' + event.index,duraction:1000})
        if(event.index == 2) {

        }
      }
    }

  }
</script>

<style scoped>
  .slider {
    width: 750px;
    height: 1250px;
  }

  .frame {
    width: 750px;
    height: 1250px;
  }

  .image {
    width: 750px;
    height: 1250px;
  }


</style>
